<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input placeholder="appId" size="small" class="filter-item search-item" v-model="queryParams.model.appId" />
      <el-input placeholder="模板编码" size="small" class="filter-item search-item" v-model="queryParams.model.customCode" />
      <el-input placeholder="名称" size="small" class="filter-item search-item" v-model="queryParams.model.name" />
      <el-input placeholder="模板CODE" size="small" class="filter-item search-item" v-model="queryParams.model.templateCode" />
      <el-input placeholder="签名" size="small" class="filter-item search-item" v-model="queryParams.model.signName" />
      <el-date-picker size="small"
        :range-separator="null"
        class="filter-item search-item date-range-item"
        end-placeholder="结束日期"
        format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        type="daterange"
        v-model="queryParams.timeRange"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-button @click="search" size="small" class="filter-item" plain type="primary">搜索</el-button>
      <el-button @click="reset" size="small" class="filter-item" plain type="warning">重置</el-button> -->
      <el-button @click="add" size="small" class="filter-item" plain type="primary">
        添加
      </el-button>
    </div>

    <el-table
      :data="list"
      border fit row-key="id"
      ref="table"
      style="width: 100%;"
      v-loading="loading"
    >
      <el-table-column align="center" type="selection" width="40px" />
      <el-table-column
        column-key="providerType"
        label="供应商类型"
        :show-overflow-tooltip="true"
        align="center"
        prop="providerType"
        width="100px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.providerType }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="AppId" :show-overflow-tooltip="true" align="center" prop="appId">
        <template slot-scope="scope">
          <span>{{ scope.row.appId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="appSecret" :show-overflow-tooltip="true" align="center" prop="appSecret">
        <template slot-scope="scope">
          <span>{{ scope.row.appSecret }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="名称" :show-overflow-tooltip="true" align="center" prop="name" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板编码" :show-overflow-tooltip="true" align="center" prop="customCode">
        <template slot-scope="scope">
          <span>{{ scope.row.customCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板CODE" align="center" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.templateCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="签名" align="center" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.signName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.templateDescribe }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" sortable="custom" width="170px">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" column-key="operation" class-name="small-padding fixed-width" width="100px">
        <template slot-scope="{row}">
          <i @click="edit(row)" class="el-icon-edit table-operation" style="color: #2db7f5;" />
          <i @click="singleDelete(row)" class="el-icon-delete table-operation" style="color: #f50;" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="pageChange"
      :total="total"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next"
    ></el-pagination>
    <sms-template-edit :dialog-visible="dialog.isVisible" :type="dialog.type" @close="editClose" @success="editSuccess" ref="edit" />
  </div>
</template>

<script>
import SmsTemplateEdit from './Edit'
import { get, postJson, postXform } from "@/utils/request.js";

export default {
  name: 'SmsTemplateManage',
  components: { SmsTemplateEdit },
  data () {
    return {
      dialog: {
        isVisible: false,
        type: 'add'
      },
      // queryParams: initQueryParams({
      //   model:{}
      // }),
      selection: [],
      loading: false,

      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表

    }
  },
  computed: {
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      get("/smsTemplate/pageSmsTemplate", {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.list = res.data.data.list;
        // 自定义下标
        this.list.forEach((e, idx) => {
          e.idx = (idx + 1) * this.pageNum;
        });

        this.total = Number.parseInt(res.data.data.total);
        this.pageNum = res.data.data.pageNum;
      });
    },
    editClose () {
      this.dialog.isVisible = false
    },
    editSuccess () {
      this.getList()
    },
    singleDelete (row) {
      this.$confirm("删除", "确定要删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning'
      }).then(() => {
        postXform("/smsTemplate/deleteSmsTemplate",{id:row.id}).then((response) => {
          const res = response.data
          if (res.isSuccess) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          }
          this.getList()
        })
      }).catch(() => {
      })
    },
    add () {
      this.dialog.type = 'add'
      this.dialog.isVisible = true
      this.$refs.edit.setSmsTemplate({enums: this.enums})
    },
    edit (row) {
      this.$refs.edit.setSmsTemplate({row, enums: this.enums})
      this.dialog.type = 'edit'
      this.dialog.isVisible = true
    },
  }
}
</script>
<style lang="less" scoped>
</style>
